import React from 'react';
import { connect } from 'dva';
import { Icon } from 'antd-mobile';
import { routerRedux } from 'dva/router';
import styles from './common.css';
import content from '../../common/contentCss/content.css';
import CustTitle from '../../common/title/title';
import SelectBar from './pages/selectBar';
import CitySelect from './pages/citySelect';

function Index({dispatch,loading,citySelect}) {

  const { isShow } = citySelect;
  // console.log('list', JSON.stringify(list));
  // console.log('isShow', isShow);
  let scrollTopStatus = 0;
  // window.onscroll = function () {
  //   if (document.documentElement.scrollTop + document.body.scrollTop > 100) {
  //     console.log(document.documentElement.scrollTop + document.body.scrollTop > 100);
  //       // document.getElementById("scrollto").style.display = "block";
  //       scrollTopStatus = 1;
  //   }
  //   else {
  //     console.log(document.documentElement.scrollTop + document.body.scrollTop > 100);
  //       // document.getElementById("scrollto").style.display = "none";
  //       scrollTopStatus = 0;
  //   }
  // }

  const titleProps = {
    titleName:'选择城市',
    goBack(){
      dispatch({
        type: 'citySelect/querySuccess',
        payload: {
          isShow:false,
        }
      })
      dispatch(routerRedux.goBack());
    },
  }

  const MarginHeight = () => <div style={{height: '0.6em', backgroundColor:'#F2F2F2'}}></div>;

  const showSelectBar = () => {

    let showSelectBarStyles = [`${styles.selectBar}`];
    if(isShow){
      showSelectBarStyles.push(`${styles.showSelectList}`)
    }

    const selectBarProps = {
      isShow,
      list: {},
      onClickInput(value){
        console.log('value', value);
        dispatch({
          type: 'citySelect/querySuccess',
          payload: {
            isShow:value,
          }
        })
      },
      selectView(value){
        console.log(value);
        if(localStorage.historyRecords){
          let oldHistoryList = JSON.parse(localStorage.historyRecords);
          if(oldHistoryList.length == 10){
            oldHistoryList.pop();
          }
          let newHistoryList = []
          oldHistoryList.map((item, index) => {
            if(item != value){
              newHistoryList.push(item);
            }
          })
          newHistoryList.unshift(value);
          localStorage.historyRecords = JSON.stringify(newHistoryList);
        }else{
          let hrDataList = [];
          hrDataList.push(value)
          localStorage.historyRecords = JSON.stringify(hrDataList);
        }

        dispatch({
          type: 'citySelect/querySuccess',
          payload: {
            isShow:false,
          }
        })
        dispatch({
          type: 'relations/querySuccess',
          payload: {
            cityName:value,
          }
        })
        dispatch({
          type: 'allPartTime/querySuccess',
          payload: {
            ordeyIndex: 0,
            areaIndex: 0,
            typeNameIndex: 0,
            key:'',
            typeId:'',
            district:'',
          }
        });

        dispatch(routerRedux.goBack())
      }
    }

    return (
      <div className={showSelectBarStyles.join(' ')}>
        <SelectBar {...selectBarProps}/>
      </div>
    )
  }

  const citySelectProps = {
    selectCity(value){
      console.log(value);

      if(localStorage.historyRecords){
        let oldHistoryList = JSON.parse(localStorage.historyRecords);
        if(oldHistoryList.length == 10){
          oldHistoryList.pop();
        }
        let newHistoryList = []
        oldHistoryList.map((item, index) => {
          if(item != value){
            newHistoryList.push(item);
          }
        })
        newHistoryList.unshift(value);
        localStorage.historyRecords = JSON.stringify(newHistoryList);
      }else{
        let hrDataList = [];
        hrDataList.push(value)
        localStorage.historyRecords = JSON.stringify(hrDataList);
      }

      dispatch({
        type: 'relations/querySuccess',
        payload: {
          cityName:value,
        }
      })
      dispatch({
        type: 'allPartTime/querySuccess',
        payload: {
          ordeyIndex: 0,
          areaIndex: 0,
          typeNameIndex: 0,
          key:'',
          typeId:'',
          district:'',
        }
      });
      dispatch(routerRedux.goBack())
    }
  }

  const closeView =() => {
    dispatch({
      type: 'citySelect/querySuccess',
      payload: {
        isShow:false,
      }
    })
  }

  return (
    <div className={content.content}>
      <CustTitle {...titleProps}/>
      {showSelectBar()}
      <CitySelect {...citySelectProps}/>
    </div>
  )
}

function mapStateToProps(state, ownProps) {
  return {
    loading: state.loading.global,
    citySelect: state.citySelect,
  }
}
export default connect(mapStateToProps)(Index);
